<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>确认订单</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="css/submitorder.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="addressBox">
            <template v-if="userInfo.userName!=''">
                <div>
                    <span>{{userInfo.userName}}</span>
                    <span>{{userInfo.telNumber}}</span>
                </div>
                <div>
                    {{userInfo.address}}
                </div>
            </template>
            <template v-else>
                <div class="addressTip" @click="gatAddress">
                    点击设置收货地址
                </div>
            </template>
        </div>

        <div class="productInfo">
            <div class="proInfo">
                <img :src="path+'product/product_'+order.product.productId+'/'+ order.product.productPic" alt=""
                    class="proImg">
                <div class="goodI">
                    <div>{{order.product.productName}}</div>
                    <div>规格:{{order.formart.formartName}}</div>
                    <div>￥{{order.formart.formartPrice}}</div>
                    <div>X{{order.chooseNum}}</div>
                </div>
            </div>
            <!-- 具体内容 -->
            <div class="moneyBox">
                <div>
                    <span class="redText">{{grade==4?'股东使用微信支付购买，可享股东专享价':`会员购买商品可享${rebateNum}折优惠`}}</span>
                </div>
                <div>
                    <span>商品总额：</span>
                    <span class="redText">￥{{order.totalMoney.toFixed(2)}}</span>
                </div>
                <div v-if="isEnough" @click="show=true">
                    <span>可用储值金：</span>
                    <span>
                        <template v-if='payWay==1'>
                            <span>
                                储值金：<span class="redText">{{currTotal}}</span> 元+限时储值金：<span
                                    class="redText">{{limitStored}}</span> 元
                            </span>
                        </template>
                        <template v-else>0</template><van-icon name="arrow" /></span>
                </div>

                <div>
                    <span>实付金额：</span>
                    <span class="redText">￥{{realTotalMoney.toFixed(2)}}</span>
                </div>

                <div class="product-items" id="payBtn">
                    <div class="product-items-title">支付方式 :</div>
                    <div class="product-items-text">
                        <span> {{payWay==1?'储值金支付':'微信支付'}}</span>
                        <van-icon name="arrow" />
                    </div>
                </div>

            </div>
        </div>
        <div class="subtnBox">
            <div class="priceBox">
                <span>共计{{order.chooseNum}}件，</span>
                <div>合计: <span>￥{{realTotalMoney.toFixed(2)}}</span> </div>
            </div>
            <div @click="addOrder">立即支付</div>
        </div>


        <van-popup v-model="show" position="bottom">
            <div class="alert-title">选择付款方式</div>
            <div class="alert-btn" @click="show=false">确定</div>
            <div class="alert-list">
                <van-radio-group v-model="payWay">
                    <van-cell-group>
                        <van-cell title="储值金支付" clickable @click="choosePay(1)">
                            <template #right-icon>
                                <van-radio name="1" />
                            </template>
                        </van-cell>
                        <van-cell clickable @click="choosePay(0)">
                            <template #title>
                                不使用储值金
                            </template>
                            <template #right-icon>
                                <van-radio name="2" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </div>
        </van-popup>


        <div class="addressDia" v-if="isShowAddress">
            <div class="addBox">
                <div class="addTitle">
                    收货信息
                </div>
                <div class="addCon">
                    <div>
                        <span>收件人</span>
                        <input type="text" placeholder="请输入收件人" v-model="userInfo.userName">
                    </div>
                    <div>
                        <span>收件电话</span>
                        <input type="text" placeholder="请输入收件电话" v-model="userInfo.telNumber">
                    </div>
                    <div>
                        <span>地址</span>
                        <input type="text" placeholder="请输入收货地址" v-model="userInfo.address">
                    </div>
                </div>
                <div class="addbtnBox">
                    <div @click="isShowAddress=false">取消</div>
                    <div @click="addressConfirm">确认</div>
                </div>
            </div>
        </div>



        <!-- 支付成功 弹窗 开始 -->
        <div class="successDialog" v-if="payStatus">
            <div class="topBox" @click="payStatus=false">
                <img src="../img/distribution/successimg.png" alt="">
                <span>支付成功</span>
                <span>您的订单可在APP内查看</span>
                <!-- <div @click="downHandle">立即下载</div> -->
            </div>
        </div>
        <!-- 支付成功 弹窗 结束 -->

        <div class="mask" v-if="mask">
            <img src="../img/load.gif">
        </div>
    </div>

    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                order: '',
                userInfo: {
                    userName: '',
                    telNumber: '',
                    address: '',
                },
                payStatus: false,
                rulesObj: {},
                jianglist: [],
                isShowAddress: false,
                payWay: '2',//2 微信支付  1 储值金支付

                realTotalMoney: 0,
                useRechargeNum: 0,//使用的储值金

                userStored: '',//用户的储值金信息
                userlimitBalance: 20, //用户限时储值金

                show: false,//支付方式弹窗

                currTotal: 0.0,  // 使用的储值金
                limitStored: 0, // 使用的限时储值金  

                isEnough: false,//用户 储值金是否够支付商品
                user: JSON.parse(sessionStorage.user),
                grade: '',
                rebateNum: 5


            },
            created() {
                this.order = JSON.parse(sessionStorage.order)
                console.log(this.order);
                var that = this;
                this.realTotalMoney = this.order.totalMoney
                this.getData()
                this.getSpecialID()
            },
            methods: {
                getSpecialID() {
                    var _this = this;
                    ajax({
                        url: newUrl + 'product/listCashProduct',
                        type: 'post',
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            if (res.flag) {
                                res.data.forEach(item => {
                                    if (item.advance == 5 && item.productId == sessionStorage.shopId) {
                                        _this.rebateNum = Number(item.advances)
                                    }
                                })
                                console.log(_this.rebateNum);
                            }
                        }
                    })
                },

                getData() {
                    var _this = this;
                    _this.mask = true
                    ajax({
                        url: newUrl + 'stored/getUserStored',
                        type: 'post',
                        data: {
                            userId: sessionStorage.userId,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.mask = false
                            if (res.flag) {
                                console.log(res);
                                if (res.data.userStored != null) {

                                    _this.userlimitBalance = res.data.limitBalance
                                    _this.userStoredNum = Number(res.data.userStored.storeMoney) + Number(_this.userlimitBalance)
                                    _this.grade = res.data.userStored.grade
                                    _this.isEnough = _this.userStoredNum >= (Number((_this.order.totalMoney * _this.rebateNum) / 10));
                                    if (_this.isEnough) {
                                        var num = Number((_this.order.totalMoney * _this.rebateNum) / 10)

                                        if (num <= _this.userlimitBalance) {
                                            _this.limitStored = num
                                            _this.currTotal = 0
                                        } else {
                                            _this.limitStored = _this.userlimitBalance
                                            _this.currTotal = num - _this.userlimitBalance
                                        }
                                        _this.currTotal = (_this.currTotal).toFixed(2);
                                        _this.limitStored = (_this.limitStored).toFixed(2);

                                        _this.realTotalMoney = 0;
                                        _this.payWay = '1'

                                    } else {
                                        if (_this.grade != 0) {
                                            _this.realTotalMoney = Number((_this.order.totalMoney * _this.rebateNum) / 10);
                                            _this.payWay = '2'
                                        }
                                    }
                                }
                            }
                        }
                    })
                },
                choosePay(val) {
                    console.log(val);
                    if (val == 0) {
                        //不适用
                        console.log(this.order.totalMoney);
                        if (this.grade == 4) {
                            this.realTotalMoney = this.order.chooseNum * this.order.formart.formatVipPrice;
                        } else {
                            this.realTotalMoney = Number((this.order.totalMoney * this.rebateNum) / 10)
                        }
                        this.currTotal = 0;
                        this.limitStored = 0;
                        this.payWay = '2'


                    } else {
                        var num = Number((this.order.totalMoney * this.rebateNum) / 10)
                        console.log(num);
                        if (num <= this.userlimitBalance) {
                            this.limitStored = num
                            this.currTotal = 0
                        } else {
                            this.limitStored = this.userlimitBalance
                            this.currTotal = num - this.userlimitBalance
                        }
                        this.currTotal = (this.currTotal).toFixed(2);
                        this.limitStored = (this.limitStored).toFixed(2);
                        this.realTotalMoney = 0;
                        this.payWay = '1'
                    }
                    this.show = false
                },
                addressConfirm() {
                    if (this.userInfo.userName == '') {
                        this.$toast('请输入收件人')
                        return
                    } else if (this.userInfo.telNumber == '') {
                        this.$toast('请输入收件电话')
                        return
                    } else if (this.userInfo.address == '') {
                        this.$toast('请输入收件地址')
                        return
                    }

                    console.log(this.userInfo);


                    this.isShowAddress = false
                },
                addOrder() {
                    if (this.userInfo.userName == '') {
                        this.$toast('请输入收件人')
                        return
                    } else if (this.userInfo.telNumber == '') {
                        this.$toast('请输入收件电话')
                        return
                    } else if (this.userInfo.address == '') {
                        this.$toast('请输入收件地址')
                        return
                    }

                    this.mask = true
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "order/addShopOrder",
                        data: {
                            // userId: 97740,
                            // shopId: 3522,
                            // parentId: 0,
                            userId: sessionStorage.userId,
                            shopId: sessionStorage.shopId,
                            parentId: sessionStorage.shareId,
                            productIds: that.order.product.productId,
                            nums: that.order.chooseNum,
                            prices: that.order.formart.formartPrice,
                            formatIds: that.order.formart.formartId,
                            addressDetail: that.userInfo.address,
                            addressName: that.userInfo.userName,
                            addressTel: that.userInfo.telNumber,
                            productNames: that.order.product.productName,
                            productPics: that.order.product.productPic,
                            totalSum: that.order.totalMoney,
                            realSum: that.realTotalMoney,
                            usedStored: that.currTotal,
                            limitStored: that.limitStored,
                            note: '',
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.mask = false
                                if (that.realTotalMoney == 0) {
                                    // 储值金购买
                                    that.payStatus = true
                                    that.getData()
                                } else {
                                    that.payHandle(res.data)
                                    console.log(res);
                                }
                            }
                        }
                    })
                },


                payHandle(obj) {
                    this.mask = true
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "pay/wxPayShopOrder",
                        data: {
                            openId: sessionStorage.openId,
                            parentId: that.user.referrerId,
                            userId: sessionStorage.userId,
                            shopId: sessionStorage.shopId,
                            realMoney: that.realTotalMoney,
                            orderNum: obj.orderNum,
                            rebate: obj.rebate,
                            ifDown: that.user.ifDownload == 1 ? 1 : 0
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            console.log(res);
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.mask = false
                                console.log(res);
                                onBridgeReady(res.data)
                            }
                        }
                    })
                },


                // 获取地址
                gatAddress() {
                    var _this = this;
                    _this.mask = true
                    var url = location.href.split('#')[0];
                    ajax({
                        type: "post",
                        url: newUrl + "share/share",
                        data: {
                            url: url
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var res = JSON.parse(data)
                            console.log(res)
                            var datas = res.data
                            _this.mask = false;
                            wx.config({
                                debug: false,
                                appId: datas.appId,
                                timestamp: datas.timestamp,
                                nonceStr: datas.nonceStr,
                                signature: datas.sign,
                                jsApiList: [
                                    'checkJsApi',
                                    'openAddress'
                                ]
                            });

                            wx.ready(function () {
                                wx.openAddress({
                                    success: function (res) {
                                        var str = res.provinceName + res.cityName + res.countryName + res.detailInfo
                                        _this.userInfo = {
                                            userName: res.userName,
                                            telNumber: res.telNumber,
                                            address: str,
                                        }
                                    }
                                });
                            })
                            wx.error(function (res) {

                            })
                        }
                    })

                },

                // 立即下载
                downHandle() {
                    window.location.replace("../newDown.html")
                },
            }
        })


        function wxPayHandle() {
            // 检测支付环境中的 WeixinJSBridge
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        }


        function onBridgeReady(data) {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                "appId": data.appId, //公众号名称，由商户传入
                "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                "nonceStr": data.nonceStr, //随机串
                "package": data.package,
                "paySign": data.paySign, //微信签名
                "signType": data.signType //微信签名方式：
            },
                function (res) {
                    // 支付成功
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        vm.payStatus = true
                        alert('支付成功')
                    }
                    // 支付过程中用户取消
                    if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        alert('已取消支付')
                    }
                    // 支付失败
                    if (res.err_msg == "get_brand_wcpay_request:fail") {
                        alert('支付失败')
                    }
                    if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
                    }
                });
        }

    </script>

</body>

</html>